<template>
  <div id="vas-order-detail" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation" v-if="detail !== null">
      <ol class="breadcrumb">
        <li class="breadcrumb-item ms-1">
          <template v-if="detail.productType === 0">
            <router-link to="/h5/insurance/orders">保险单</router-link>
          </template>
          <template v-else>
            <router-link to="/h5/vas/orders">服务单</router-link>
          </template>
        </li>
        <li class="breadcrumb-item active" aria-current="page">详情</li>
        <span class="ms-auto me-1" @click.stop="back()">返回</span>
      </ol>
    </nav>
    <template v-if="detail !== null">
      <dl class="row">
        <dt class="col-4 text-end">服务单号</dt>
        <dd class="col-8">{{ detail.orderNo }}</dd>
        <dt class="col-4 text-end">客户</dt>
        <dd class="col-8">
          {{ showCustomerName(detail) }}
          <template v-if="detail.customer !== null">{{
            detail.customer.vipName
          }}</template>
          <template v-else>散客</template>
        </dd>
        <dt class="col-4 text-end">项目</dt>
        <dd class="col-8">{{ detail.productName }}</dd>
        <dt class="col-4 text-end">数量</dt>
        <dd class="col-8">{{ detail.count }}</dd>
        <dt class="col-4 text-end">价格</dt>
        <dd class="col-8">{{ detail.price }}</dd>
        <dt class="col-4 text-end">折扣</dt>
        <dd class="col-8">{{ detail.discount }}</dd>
        <dt class="col-4 text-end">总金额</dt>
        <dd class="col-8">{{ detail.totalAmount }}</dd>
        <dt class="col-4 text-end">总成本</dt>
        <dd class="col-8">{{ detail.totalCost }}</dd>
        <dt class="col-4 text-end">利润</dt>
        <dd class="col-8">{{ detail.profit }}</dd>
        <dt class="col-4 text-end">付款方式</dt>
        <dd class="col-8">
          {{ getPayTypeDesc(detail.payType) }}
          <template v-if="detail.payType !== 8 && detail.payStatus === 0">
            <span class="small text-danger">(未付)</span>
            <button class="btn btn-danger btn-sm" @click.stop="setOrderPaid()">
              已收款
            </button>
          </template>
          <span class="small text-primary" v-if="detail.payStatus === 2"
            >已销</span
          >
        </dd>
        <dt class="col-4 text-end">供应商</dt>
        <dd class="col-8">
          <template v-if="detail.supplier !== null">{{
            detail.supplier.name
          }}</template>
        </dd>
        <dt class="col-4 text-end">支付方式</dt>
        <dd class="col-8">
          <template v-if="detail.paymentMethod !== null">{{
            detail.paymentMethod.name
          }}</template>
        </dd>
        <dt class="col-4 text-end">预定人</dt>
        <dd class="col-8">{{ detail.operator }}</dd>
        <dt class="col-4 text-end">处理人</dt>
        <dd class="col-8">{{ detail.ticketer }}</dd>
        <dt class="col-4 text-end">状态</dt>
        <dd class="col-8">{{ getStatusDesc(detail.status) }}</dd>
        <dt class="col-4 text-end"></dt>
        <dd class="col-8">
          <template v-if="detail.flightOrderId > 0">
            <router-link
              :to="`/h5/flt/order/` + detail.flightOrderId"
              title="关联的机票订单"
              >关联单</router-link
            >
          </template>
        </dd>
      </dl>
      <div class="card-body" v-if="detail.status === 0 || detail.status === 1">
        <button
          class="btn btn-info btn-sm ms-auto me-auto"
          @click.stop="editTicketSupplier()"
        >
          更改供应商
        </button>
        <button
          class="btn btn-info btn-sm ms-auto me-auto"
          @click.stop="editTicketPayment()"
        >
          更改支付方式
        </button>
        <button
          class="btn btn-info btn-sm ms-auto me-auto"
          @click.stop="editPrice()"
        >
          修改价格
        </button>
      </div>
      <div class="card-body">
        <div
          class="d-flex flex-row justify-content-around"
          v-if="detail.status === 0"
        >
          <button
            class="btn btn-primary btn-sm ms-auto me-auto"
            @click.stop="processOrder()"
          >
            处理订单
          </button>
          <button
            class="btn btn-danger btn-sm ms-autome-auto"
            @click.stop="cancelOrder()"
          >
            取消订单
          </button>
        </div>
        <div
          class="d-flex flex-row justify-content-around"
          v-else-if="detail.status === 1"
        >
          <button
            class="btn btn-primary btn-sm ms-auto me-auto"
            @click.stop="finishOrder()"
          >
            处理完毕
          </button>
          <button
            class="btn btn-danger btn-sm ms-auto me-auto"
            @click.stop="cancelOrder()"
          >
            取消订单
          </button>
        </div>
        <div
          class="d-flex flex-row justify-content-around"
          v-if="detail.status === 2 && detail.payStatus !== 2"
        >
          <button
            class="btn btn-danger btn-sm ms-2"
            @click.stop="rollbackStatus()"
            v-if="isAdmin"
          >
            回滚
          </button>
        </div>
      </div>
      <div class="card-body bg-info text-white py-0">乘客信息</div>
      <table class="table table-sm">
        <thead>
          <tr>
            <th>姓名</th>
            <th>证件号</th>
            <th class="d-none d-sm-table-cell">备注</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(info, index) in detail.passengers" :key="info.id">
            <td>{{ info.name }}</td>
            <td>{{ info.idNo }}</td>
            <td class="d-none d-sm-table-cell">{{ info.remark }}</td>
            <td>
              <template v-if="detail.status === 0">
                <a
                  href="javascript:void(0)"
                  @click.stop="editPsg(index)"
                  class="btn btn-primary"
                  >修改</a
                >
              </template>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="card-body bg-info text-white py-0">航班信息</div>
      <table class="table table-striped table-hover table-sm">
        <thead>
          <tr>
            <th>出发</th>
            <th>到达</th>
            <th>日期</th>
            <th>航班</th>
            <th>起飞</th>
            <th class="d-none d-sm-table-cell">落地</th>
            <th>舱位</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="info in detail.flights" :key="info.id">
            <td>
              {{ info.dport
              }}<span class="d-none d-sm-table-cell"
                >{{ info.dportName }} {{ info.dterm }}</span
              >
            </td>
            <td>
              {{ info.aport
              }}<span class="d-none d-sm-table-cell"
                >{{ info.aportName }} {{ info.aterm }}</span
              >
            </td>
            <td>{{ info.ddate.substring(5) }}</td>
            <td>{{ info.flightNo }}</td>
            <td>{{ info.dtime }}</td>
            <td class="d-none d-sm-table-cell">{{ info.atime }}</td>
            <td>{{ info.subclass }}</td>
          </tr>
        </tbody>
      </table>
      <div class="card-header bg-secondary text-white">备注</div>
      <div class="card-body">
        {{ detail.remark }}
        <br />
        <template v-if="detail.status !== 2 && detail.status !== 4">
          <a
            href="javascript:void(0)"
            @click.stop="editRemark()"
            class="small float-end"
            title="修改备注"
            >修改</a
          >
        </template>
      </div>
      <div class="card-body">
        <a
          href="javascript:void(0)"
          class="float-end"
          @click.stop="viewHistory()"
          >查看历史记录</a
        >
      </div>
      <table class="table table-sm table-striped">
        <thead>
          <tr>
            <td>操作员</td>
            <td>内容</td>
            <td>时间</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="info in histories" :key="info.id">
            <td>{{ info.operator }}</td>
            <td>{{ info.content }}</td>
            <td>{{ info.createTime }}</td>
          </tr>
        </tbody>
      </table>
    </template>

    <my-modal-prompt ref="modalPrompt">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
    <my-modal-supplier-update
      ref="updateSupplierModal"
    ></my-modal-supplier-update>
    <my-modal-pay-method-update
      ref="updatePayMethodModal"
    ></my-modal-pay-method-update>
    <my-modal-vas-price-update
      ref="updateVasPriceModal"
    ></my-modal-vas-price-update>
    <my-modal-update-passenger ref="updatePsgModal"></my-modal-update-passenger>
  </div>
</template>

<script>
import $ from "jquery";
import { searchVasOrderDetail, searchVasOrderHistory } from "@/api/vas.js";
import { processVasOrder, cancelVasOrder, finishVasOrder } from "@/api/vas.js";
import {
  updateVasOrderRemark,
  updateVasOrderPassenger,
  updateVasOrderSupplier,
  updateVasOrderPrice,
  updateVasOrderPayment,
  outputVasOrder2Bill,
  showVasOrderStatus,
} from "@/api/vas.js";
import { showPayType } from "@/common/common.js";
import { showCustomerName } from "@/common/common.js";
import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";
import MyModalSupplierUpdate from "@/components/modal/my-modal-supplier-update.vue";
import MyModalPayMethodUpdate from "@/components/modal/my-modal-pay-method-update.vue";
import MyModalVasPriceUpdate from "@/components/modal/my-modal-vas-price-update.vue";
import MyModalUpdatePassenger from "@/components/modal/my-modal-update-passenger.vue";
import { rollbackVasOrderStatus } from "@/api/admin.js";

export default {
  components: {
    MyModalPrompt,
    MyModalSupplierUpdate,
    MyModalPayMethodUpdate,
    MyModalVasPriceUpdate,
    MyModalUpdatePassenger
  },
  data() {
    return {
      detail: null,
      id: 0,
      histories: [],

      remark: "",
      psgId: 0,
      psgName: "",
      psgIdNo: "",
      psgRemark: "",

      modalTitle: "",
    };
  },
  computed: {
    supplierId: function () {
      if (this.detail === null || this.detail.supplier === null) {
        return 0;
      } else {
        return this.detail.supplier.id;
      }
    },
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  mounted: function () {
    this.$store.commit("setWorkMode", "h5");
    this.id = this.$route.params.id;
    this.search();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    search: function () {
      searchVasOrderDetail(this.id, (v) => {
        this.detail = v;
      });
    },
    getStatusDesc: function (status) {
      return showVasOrderStatus(status);
    },
    getPayTypeDesc: function (payType) {
      return showPayType(payType);
    },
    editRemark: function () {
      this.modalTitle = "请输入新的备注：";
      const promise = this.$refs.modalPrompt.modal();
      promise
        .then((remark) => {
          // 点击确定按钮的回调处理
          if (remark === "") {
            return;
          }
          this.remark = remark;
          this.doUpdateRemark();
        })
        .catch((r) => {
          // console.log('catch: ' + r)
        });
    },
    doUpdateRemark: function () {
      const params = {
        remark: this.remark,
      };

      updateVasOrderRemark(this.id, params, (jsonResult) => {
        if (jsonResult.status !== "OK") {
          this.showErrMsg("失败：" + jsonResult.errmsg);
        } else {
          this.showErrMsg("保存成功");
          $("#modalUpdateRemark").modal("hide");
          this.search();
        }
      });
    },
    editPsg: function (index) {
      this.psgId = this.detail.passengers[index].id;
      this.psgName = this.detail.passengers[index].name;
      this.psgIdNo = this.detail.passengers[index].idNo;
      this.psgRemark = this.detail.passengers[index].remark;

      const params = {
        id: this.psgId,
        name: this.psgName,
        idNo: this.psgIdNo,
        remark: this.psgRemark,
        mobile: '',
        ffpNo: ''
      }

      this.$refs.updatePsgModal.modal(params).then(v => this.updatePsg(v));
    },
    updatePsg: function (params) {
      

      updateVasOrderPassenger(this.id, params, (v) =>
        this.commonShowMessage(v)
      );
    },
    cancelOrder: function () {
      this.modalTitle = "请输入取消订单的理由：";
      const promise = this.$refs.modalPrompt.modal();
      promise
        .then((remark) => {
          // 点击确定按钮的回调处理
          if (remark === "") {
            this.showErrMsg("请填写取消订单的理由");
            return;
          }
          this.doCancelOrder(remark);
        })
        .catch((r) => {
          // 点击取消按钮的回调处理
          // console.log('catch: ' + r)
        });
    },
    doCancelOrder: function (remark) {
      const params = {
        remark: remark,
      };
      cancelVasOrder(this.id, params, (v) => this.commonShowMessage(v));
    },
    editTicketSupplier: function () {
      const promise = this.$refs.updateSupplierModal.modal(this.supplierId);
      promise
        .then((info) => {
          this.doUpdateSupplier(info.supplierId);
        })
        .catch(() => {
          // this.showErrMsg('canceled')
        });
    },
    doUpdateSupplier: function (supplierId) {
      const params = {
        supplierId: supplierId,
      };

      updateVasOrderSupplier(this.id, params, (v) => this.commonShowMessage(v));
    },
    editTicketPayment: function () {
      this.$refs.updatePayMethodModal
        .modal(this.payMethodId)
        .then((info) => {
          updateVasOrderPayment(
            this.id,
            { paymentMethodId: info.payMethodId },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editPrice: function () {
      this.$refs.updateVasPriceModal
        .modal(this.detail.price, this.detail.discount, this.detail.cost)
        .then((v) => this.doUpdatePrice(v))
        .catch(() => {});
    },
    doUpdatePrice: function (v) {
      const params = {
        price: v.price,
        discount: v.discount,
        cost: v.cost,
      };

      updateVasOrderPrice(this.id, params, (v) => this.commonShowMessage(v));
    },
    processOrder: function () {
      processVasOrder(this.id, (v) => this.commonShowMessage(v));
    },
    finishOrder: function () {
      this.modalTitle = "请输入备注：";
      const promise = this.$refs.modalPrompt.modal();
      promise
        .then((remark) => {
          if (remark === "") {
            return;
          }
          finishVasOrder(this.id, { remark }, (v) => this.commonShowMessage(v));
        })
        .catch((r) => {});
    },
    viewHistory: function () {
      searchVasOrderHistory(this.id, (jsonResult) => {
        this.histories = jsonResult;
      });
    },
    commonShowMessage: function (jsonResult) {
      if (jsonResult.status !== "OK") {
        this.showErrMsg("操作失败：" + jsonResult.errmsg, "danger");
      } else {
        if (jsonResult.desc !== "") {
          this.showErrMsg(jsonResult.desc);
        } else {
          this.showErrMsg("操作成功");
        }
        this.search();
      }
    },
    outputBillInfo: function () {
      outputVasOrder2Bill(this.id, (v) => this.commonShowMessage(v));
    },
    rollbackStatus: function () {
      this.modalTitle = "确定将订单状态回滚到上一个嘛？";

      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          rollbackVasOrderStatus(this.id, {remark}, (v) => this.commonShowMessage(v));
        })
        .catch((ex) => {
          console.log(ex);
        });
    },
    showCustomerName: function (info) {
      return showCustomerName(info);
    },
  },
};
// 530
</script>